<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="generator" content="Zoomla逐浪CMS z01.com">
<title>BootstrapVue-基于VueJS的Bootstrap框架 &middot; 全球最流行的 HTML、CSS 和 JS 工具库。</title>
<!--IE兼容组件-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit|ie-comp|ie-stand">

<!-- Bootstrap 核心CSS -->
<link href="../v4/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- 本文档额外专用css -->
<link href="../v4/assets/css/docs.min.css" rel="stylesheet">
<link href="style/bv_path.css" rel="stylesheet">

<!-- Favicons图标定义 -->
<link data-n-head="ssr" rel="manifest" href="manifest.json">
<link data-n-head="ssr" rel="shortcut icon" href="style/icons/icon_64.png">
<link data-n-head="ssr" rel="apple-touch-icon" href="style/icons/icon_512.png" sizes="512x512">

<meta name="theme-color" content="#563d7c">
<!-- Meta关键字定义 -->
<meta name="description" content="全球最流行的 HTML、CSS 和 JS 工具库。">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">

<!-- Twitter -->
<meta name="twitter:site" content="@getbootstrap">
<meta name="twitter:creator" content="@getbootstrap">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Bootstrap">
<meta name="twitter:description" content="全球最流行的 HTML、CSS 和 JS 工具库。">
<meta name="twitter:image" content="assets/brand/bootstrap-social.png">

<!-- Facebook -->
<meta property="og:url" content="https://v4.bootcss.com">
<meta property="og:title" content="Bootstrap">
<meta property="og:description" content="全球最流行的 HTML、CSS 和 JS 工具库。">
<meta property="og:image" content="assets/brand/bootstrap-social.png">
<meta property="og:image:secure_url" content="assets/brand/bootstrap-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<style>

</style>

</head>
<body>
<a id="skippy" class="sr-only sr-only-focusable" href="#content">
<div class="container"> <span class="skiplink-text">跳到主体内容</span> </div>
</a>
<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar"><a href="/" aria-label="BootstrapVue" target="_self" class="navbar-brand mr-0 mr-md-2 nuxt-link-exact-active active" data-v-38a6c4bd=""><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 953 953" width="32" height="32" version="1.1" shape-rendering="geometricPrecision" fill-rule="evenodd" clip-rule="evenodd" focusable="false" role="img" class="d-block" data-v-38a6c4bd=""><title data-v-38a6c4bd="">BootstrapVue</title> <path fill="currentColor" d="M92 0h769c50 0 92 42 92 92v769c0 50-42 92-92 92H92c-50 0-92-42-92-92V92C0 42 42 0 92 0zm216 710c100 0 160-50 160-133 0-62-44-107-108-113v-3c48-8 86-52 86-102 0-71-55-117-140-117H111v468h197zM195 307h90c50 0 78 23 78 64 0 44-33 68-91 68h-77V307zm0 338V499h90c64 0 98 25 98 73s-33 73-94 73h-94zm503 65l163-468h-90L652 621h-2L531 242h-92l163 468h96z" data-v-38a6c4bd=""></path></svg></a>
  <div class="navbar-nav-scroll">
    <ul class="navbar-nav bd-navbar-nav flex-row">
      <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
      <li class="nav-item"><a class="nav-link " href="docs/index.html">中文手册</a></li>
      <li class="nav-item"><a class="nav-link " href="docs/components/">组件</a></li>
      <li class="nav-item"><a class="nav-link " href="docs/directives/">指令</a></li>
      <li class="nav-item"><a class="nav-link " href="docs/reference/">参考</a></li>
      <li class="nav-item"><a class="nav-link " href="https://bootstrap-vue.org/play" target="_blank">体验</a></li>
      <li class="nav-item"><a class="nav-link " href="http://code.z01.com/v4/"><i class="zi zi_bold" zico="粗"></i> Boostrap</a></li>
      <li class="nav-item"><a class="nav-link" href="http://ico.z01.com" target="_blank" rel="noopener">zico图标系统</a></li>
      <li class="nav-item"><a class="nav-link" href="http://www.z01.com" target="_blank" rel="noopener">Zoomla!逐浪CMS</a></li>
    </ul>
  </div>
  <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">
    <li class="nav-item dropdown"> <a class="nav-item nav-link dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> v2.12.0 </a>
      <div class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
	    <a class="dropdown-item active" href="/docs/4.0/">Latest (4.3.x)</a>
        <a class="dropdown-item" href="/Boot/">v3.3.7</a>
        <a class="dropdown-item" href="/Sass/">Sass语言</a>
        <a class="dropdown-item" href="/Emmet/">Emmet语法</a>
        <a class="dropdown-item" href="http://www.z01.com/tool/" target="_blank">IIS站长工具</a>
        <a class="dropdown-item" href="http://ad.z01.com/" target="_blank">广告源码</a>
        <a class="dropdown-item" href="http://v.z01.com/mb/" target="_blank">免费模板</a>
        <a class="dropdown-item" href="http://v.z01.com/" target="_blank">H5移动创作</a>
		<a class="dropdown-item" href="http://www.z01.com/help/web/3234.shtml" target="_blank">Flexbox布局</a>
        <a class="dropdown-item" href="docs/vscode.html">vs code技巧</a>                
		<a class="dropdown-item" href="/boot/font.html" target="_blank">Font Awesome</a>
		</div>
    </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://zoomla.github.io/bootstrap4-zhcn-documentation" target="_blank" rel="noopener" aria-label="GitHub">
      <svg class="navbar-nav-svg" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 499.36" focusable="false">
        <title>GitHub</title>
        <path d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" fill="currentColor" fill-rule="evenodd"/>
      </svg>
      </a> </li>
    <li class="nav-item"> <a class="nav-link p-2" href="http://www.z01.com/blog/ren/3214.shtml" target="_blank" rel="noopener" aria-label="Slack">译者说</a> </li>
  </ul>
  <a class="btn btn-bd-yellow d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="docs/download.html">下载 Bootstrap</a> </header>
  
<main id="content" role="main" data-v-555a030c="">
<section class="bd-masthead pt-3 pt-sm-5 pb-2" data-v-555a030c="">
<article class="container" data-v-555a030c="">
<div class="row mb-2 mb-md-3 mb-lg-4 no-gutters align-items-center" data-v-555a030c="">
<aside class="logo-aside mb-4 mb-md-0 col-md-4 order-md-2 col-12" data-v-555a030c="">
<svg data-v-555a030c="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 1200" version="1.1" shape-rendering="geometricPrecision" fill-rule="evenodd" clip-rule="evenodd" preserveAspectRatio="xMidYMid meet" role="img" focusable="false" class="bv-logo">
<title data-v-555a030c="">BootstrapVue</title>
<defs data-v-555a030c="">
<filter data-v-555a030c="" id="logo-shadow" filterUnits="objectBoundingBox" x="-50%" y="-50%" width="200%" height="200%">
<feOffset data-v-555a030c="" in="SourceAlpha" dx="-10" dy="25" result="ALPHA1"></feOffset>
<feMorphology data-v-555a030c="" in="ALPHA1" operator="dilate" radius="15" result="ALPHA"></feMorphology>
<feGaussianBlur data-v-555a030c="" in="ALPHA" stdDeviation="20" result="DROP"></feGaussianBlur>
<feFlood data-v-555a030c="" in="DROP" flood-color="#333" result="SOLID"></feFlood>
<feComposite data-v-555a030c="" in="DROP" in2="SOLID" operator="in" result="SHADOW1"></feComposite>
<feComponentTransfer data-v-555a030c="" in="SHADOW1" result="SHADOW">
<feFuncA data-v-555a030c="" type="linear" slope="0.55"></feFuncA>
</feComponentTransfer>
<feMerge data-v-555a030c="">
<feMergeNode data-v-555a030c="" in="SHADOW"></feMergeNode>
<feMergeNode data-v-555a030c="" in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<g data-v-555a030c="">
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-dark-v">
<path data-v-555a030c="" fill="#34495E" d="M747 311L602 562 458 311H227l375 651 376-651z"></path>
</g>
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-purple-v">
<path data-v-555a030c="" fill="#563D7C" fill-rule="nonzero" d="M219 195h762L599 857z"></path>
<path data-v-555a030c="" fill="#ffffff" d="M501 282l132 0c25,0 44,5 59,16 15,12 22,28 22,51 0,14 -3,26 -10,35 -7,10 -16,18 -29,23l0 1c17,3 30,11 38,24 9,12 13,27 13,46 0,11 -2,21 -6,30 -3,9 -9,17 -17,24 -9,6 -19,12 -32,16 -12,4 -28,6 -45,6l-125 0 0 -272 0 0zm48 114l77 0c12,0 21,-4 29,-10 8,-7 11,-16 11,-28 0,-14 -3,-24 -10,-29 -7,-6 -17,-9 -30,-9l-77 0 0 76 0 0zm0 119l84 0c14,0 26,-4 33,-11 8,-8 13,-19 13,-32 0,-14 -4,-24 -13,-31 -8,-8 -19,-11 -33,-11l-84 0 0 85z" class="logo-white-b"></path>
</g>
<g data-v-555a030c="" filter="url(#logo-shadow)" class="logo-green-v">
<path data-v-555a030c="" fill="#41B883" d="M839 357L600 771 361 357H202l398 690 398-690z"></path>
</g>
</g>
</svg>
</aside>
<section class="col-md-8 order-md-1 col-12" data-v-555a030c="">
<h1 class="mb-3 text-center text-md-left bd-text-purple-bright" data-v-555a030c=""> Bootstrap<span class="text-vue-green" data-v-555a030c="">Vue</span></h1>
<p class="lead" data-v-555a030c=""> 采用 <span class="font-weight-bolder" data-v-555a030c="">BootstrapVue</span> 构建响应式、移动优先、<a href="https://www.z01.com/help/web/3522.shtml">ARIA项目（Accessible Rich Internet Application，可访问的富媒体应用，即无障碍友好应用)</a>，基于 <span class="text-muted font-weight-bolder" data-v-555a030c="">Vue.js</span> 和世界全球最受欢迎的 CSS 前端框架 — <span class="text-muted font-weight-bolder" data-v-555a030c="">Bootstrap v4</span> </p>
<div class="media my-3" data-v-555a030c="">
<div class="d-flex align-self-center" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612" width="30px" height="30px" focusable="false" role="img" data-v-555a030c="">
<title data-v-555a030c="">Bootstrap logo</title>
<path fill="#563D7C" d="M612 510c0 56.1-45.9 102-102 102H102C45.9 612 0 566.1 0 510V102C0 45.9 45.9 0 102 0h408c56.1 0 102 45.9 102 102v408z" data-v-555a030c=""></path>
<path fill="#FFF" d="M166.3 133h173.5c32 0 57.7 7.3 77 22s29 36.8 29 66.5c0 18-4.4 33.4-13.2 46.2-8.8 12.8-21.4 22.8-37.8 29.8v1c22 4.7 38.7 15.1 50 31.2 11.3 16.2 17 36.4 17 60.8 0 14-2.5 27.1-7.5 39.2-5 12.2-12.8 22.7-23.5 31.5s-24.3 15.8-41 21-36.5 7.8-59.5 7.8h-164V133zm62.5 149.5h102c15 0 27.5-4.2 37.5-12.8s15-20.8 15-36.8c0-18-4.5-30.7-13.5-38s-22-11-39-11h-102v98.6zm0 156.5h110.5c19 0 33.8-4.9 44.2-14.8 10.5-9.8 15.8-23.8 15.8-41.8 0-17.7-5.2-31.2-15.8-40.8s-25.2-14.2-44.2-14.2H228.8V439z" data-v-555a030c=""></path>
</svg>
</div>
<div class="media-body ml-3 text-muted align-self-center" data-v-555a030c=""><a href="https//code.z01.com/v4" target="_blank" data-v-555a030c="">Bootstrap v4</a>全球最受欢迎的前端框架，移动优先并基于flexbox弹性布局，用于构建响应式网页。</div>
</div>
<div class="media mb-4" data-v-555a030c="">
<div class="d-flex align-self-center" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 196.32 170.02" width="30px" height="30px" focusable="false" role="img" class="media-vue-logo" data-v-555a030c="">
<title data-v-555a030c="">Vue.js logo</title>
<path fill="#42b883" d="M120.83 0L98.16 39.26 75.49 0H0l98.16 170.02L196.32 0h-75.49z" data-v-555a030c=""></path>
<path fill="#35495e" d="M120.83 0L98.16 39.26 75.49 0H39.26l58.9 102.01L157.06 0h-36.23z" data-v-555a030c=""></path>
</svg>
</div>
<div class="media-body ml-3 text-muted align-self-center" data-v-555a030c=""><a href="https://vuejs.org" target="_blank" data-v-555a030c="">Vue.js</a> (读音： <span class="text-nowrap" data-v-555a030c="">/<i data-v-555a030c="">vjuː</i>/</span>, 音听 view)是用于构建前端应用的渐进式框架，基于Node和webpack。 </div>
</div>
</section>
</div>
<p class="mb-0 text-muted text-center mb-n4 mb-md-n5" data-v-555a030c=""> 当前版本 <br data-v-555a030c="">
<a href="./docs/index.html" target="_self" class="small" data-v-555a030c="">v2.12.0</a></p>
<p class="text-center">[*本文档在显示相应效果时会有动作丢失，但改进了脚本复制、翻译以及速度，方便中文开发者参阅引用]。</p>
</article>
</section>
<section class="bv-section bv-gray-color" data-v-555a030c="">
<article class="container" data-v-555a030c="">
<h2 class="h4 text-center bd-text-purple-bright" data-v-555a030c="">概览</h2>
<div class="row mb-4" data-v-555a030c="">
<div class="col-lg-10 offset-lg-1" data-v-555a030c="">
<p class="text-lg-center" data-v-555a030c="">  <span class="bd-text-purple-bright" data-v-555a030c="">BootstrapVue</span> 拥有40多个可用插件和80多个自定义UI组件、指令以及300多个图标，全面兼容并符合 <span class="bd-text-purple-bright" data-v-555a030c="">Bootstrap v4.4</span>组件和网格系统规范，基于 <span class="bd-text-purple-bright" data-v-555a030c="">Vue.js v2.6</span>, 并具备广泛和自动的 <a rel="noopener" target="_blank" href="https://www.w3.org/WAI/standards-guidelines/aria/" data-v-555a030c="" class=""><abbr title="Web Accessibility Initiative – Accessible Rich Internet Applications" data-v-555a030c="">WAI-ARIA</abbr></a> 可访问性友好支持。 </p>
</div>
</div>
<div class="row justify-content-lg-center" data-v-555a030c="">
<div class="col-md-4 col-lg-3" data-v-555a030c=""><a href="docs" target="_self" class="btn mb-3 mb-md-0 btn-bd-primary btn-lg btn-block" data-v-555a030c=""> 立即开始 </a></div>
<div class="col-md-4 col-lg-3" data-v-555a030c=""><a href="https://bootstrap-vue.org/play" target="_self" class="btn mb-3 mb-md-0 btn-bd-primary btn-lg btn-block" data-v-555a030c=""> 在线体验 </a></div>
<div class="col-md-4 col-lg-3" data-v-555a030c=""><a rel="noopener" target="_blank" href="https://github.com/zoomla/bootstrapVue-cn" class="btn btn-outline-secondary btn-lg btn-block" data-v-555a030c=""> GitHub </a></div>
</div>
</article>
</section>
<section class="bv-section bv-white" data-v-555a030c="">
<div class="container" data-v-555a030c="">
<h2 class="h4 text-center text-muted" data-v-555a030c="">选择 BootstrapVue的理由</h2>
<div class="mb-sm-4 card-deck" data-v-555a030c="">
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center mb-2 bd-text-purple-bright" data-v-555a030c="">
<svg width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-phone mx-auto d-block mb-3 b-icon bi" data-v-555a030c="">
<g data-v-555a030c="">
<path fill-rule="evenodd" d="M13 3H7a1 1 0 00-1 1v11a1 1 0 001 1h6a1 1 0 001-1V4a1 1 0 00-1-1zM7 2a2 2 0 00-2 2v11a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 15a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"></path>
</g>
</svg>
<span data-v-555a030c="">响应布局</span></h3>
<p class="card-text text-center" data-v-555a030c=""> 移动优先 <a href="./docs/components/layout.html" target="_self" data-v-555a030c="" class="">响应式布局</a>  </p>
</div>
<!----><!----></article>
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center bd-text-purple-bright mb-2" data-v-555a030c="">
<svg width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-columns-gutters mx-auto d-block mb-3 b-icon bi" data-v-555a030c="">
<g data-v-555a030c="">
<path fill-rule="evenodd" d="M8 3H3v3h5V3zM3 2a1 1 0 00-1 1v3a1 1 0 001 1h5a1 1 0 001-1V3a1 1 0 00-1-1H3zm14 12h-5v3h5v-3zm-5-1a1 1 0 00-1 1v3a1 1 0 001 1h5a1 1 0 001-1v-3a1 1 0 00-1-1h-5zm-4-3H3v7h5v-7zM3 9a1 1 0 00-1 1v7a1 1 0 001 1h5a1 1 0 001-1v-7a1 1 0 00-1-1H3zm14-6h-5v7h5V3zm-5-1a1 1 0 00-1 1v7a1 1 0 001 1h5a1 1 0 001-1V3a1 1 0 00-1-1h-5z" clip-rule="evenodd"></path>
</g>
</svg>
<span data-v-555a030c="">按需组装</span></h3>
<p class="card-text text-center" data-v-555a030c="">仅 <a href="./docs/" target="_self" data-v-555a030c="" class="">导入</a> 您需要的功能</p>
</div>
<!----><!----></article>
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center bd-text-purple-bright mb-2" data-v-555a030c="">
<svg width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-eye-slash mx-auto d-block mb-3 b-icon bi" data-v-555a030c="">
<g transform="translate(10 10) scale(1.2 1.2) translate(-10 -10)" data-v-555a030c="">
<path d="M15.359 13.238C17.06 11.72 18 10 18 10s-3-5.5-8-5.5a7.028 7.028 0 00-2.79.588l.77.771A5.944 5.944 0 0110 5.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0116.828 10c-.058.087-.122.183-.195.288a13.14 13.14 0 01-1.465 1.755c-.165.165-.337.328-.517.486l.708.709z"></path>
<path d="M13.297 11.176a3.5 3.5 0 00-4.474-4.474l.823.823a2.5 2.5 0 012.829 2.829l.822.822zm-2.943 1.299l.822.822a3.5 3.5 0 01-4.474-4.474l.823.823a2.5 2.5 0 002.829 2.829z"></path>
<path d="M5.35 7.47c-.18.16-.353.322-.518.487A13.134 13.134 0 003.172 10l.195.288c.335.48.83 1.12 1.465 1.755C6.121 13.332 7.881 14.5 10 14.5c.716 0 1.39-.133 2.02-.36l.77.772A7.027 7.027 0 0110 15.5c-5 0-8-5.5-8-5.5s.939-1.721 2.641-3.238l.708.709z"></path>
<path fill-rule="evenodd" d="M15.646 16.354l-12-12 .708-.708 12 12-.708.707z" clip-rule="evenodd"></path>
</g>
</svg>
<span data-v-555a030c="">交互友好</span></h3>
<p class="card-text text-center" data-v-555a030c=""> 自动化的 <a href="./docs/reference/accessibility.html" target="_self" data-v-555a030c="" class="">WAI-ARIA 可访问性</a> 标记 </p>
</div>
<!----><!----></article>
</div>
<div class="mb-n3 card-deck" data-v-555a030c="">
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center bd-text-purple-bright mb-2" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" height="2.5em" viewBox="0 0 448 512" aria-hidden="true" focusable="false" role="img" class="mx-auto d-block mb-3" data-v-555a030c="">
<path fill="currentColor" d="M356.9 64.3H280l-56 88.6-48-88.6H0L224 448 448 64.3h-91.1zm-301.2 32h53.8L224 294.5 338.4 96.3h53.8L224 384.5 55.7 96.3z" data-v-555a030c=""></path>
</svg>
<span data-v-555a030c="">时尚流行</span></h3>
<p bg-variant="light" class="card-text text-center" data-v-555a030c=""> 使用 <a href="https://vuejs.org/" data-v-555a030c="">Vue.js v2.6</a> 和 <a href="https://getbootstrap.com" data-v-555a030c="">Bootstrap SCSS v4.4</a> 构建</p>
</div>
<!----><!----></article>
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted px-2" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center bd-text-purple-bright mb-2" data-v-555a030c="">
<svg width="2.5em" height="2.5em" viewBox="0 0 20 20" focusable="false" role="img" alt="icon" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi-gear mx-auto d-block mb-3 b-icon bi" data-v-555a030c="">
<g data-v-555a030c="">
<path fill-rule="evenodd" d="M10.837 3.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 016.377 5.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.115l.094.319c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.115-2.693l.319-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159a1.873 1.873 0 01-2.693-1.115l-.094-.319zm-2.633-.283c.527-1.79 3.064-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.064 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.901-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z" clip-rule="evenodd"></path>
<path fill-rule="evenodd" d="M10 7.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM6.754 10a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z" clip-rule="evenodd"></path>
</g>
</svg>
<span data-v-555a030c="">自由配置</span></h3>
<p class="card-text text-center" data-v-555a030c=""> 使用 SCSS 变量和 <a href="https://bootstrap-vue.org/docs/reference/settings" target="_self" data-v-555a030c="" class="">全局选项</a> 创建 <a href="./docs/reference/theming.html" target="_self" data-v-555a030c="" class="">主题</a></p>
</div>
<!----><!----></article>
<article class="card rounded-0 border-0" data-v-555a030c=""><!----><!---->
<div class="card-body text-muted" data-v-555a030c=""><!----><!---->
<h3 class="card-text h5 text-center bd-text-purple-bright mb-2" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" height="2.5em" viewBox="0 0 496 512" aria-hidden="true" focusable="false" role="img" class="mx-auto d-block mb-3" data-v-555a030c="">
<path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" data-v-555a030c=""></path>
</svg>
<span data-v-555a030c="">免费开放</span></h3>
<p class="card-text text-center" data-v-555a030c=""> 开源于<a href="https://github.com/bootstrap-vue/bootstrap-vue/" target="_blank" data-v-555a030c="">GitHub</a> ，<a href="https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE" target="_blank" data-v-555a030c="">MIT</a> 许可 </p>
</div>
<!----><!----></article>
</div>
</div>
</section>
<section class="bv-section bv-gray" data-v-555a030c="">
<article class="text-center container" data-v-555a030c="">
<h2 class="h4 text-center bd-text-purple-bright" data-v-555a030c="">与 Nuxt.js 集成</h2>
<div class="mb-2 d-flex flex-row justify-content-center align-items-center" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" height="3.5em" width="3.5em" viewBox="0 0 400 400" version="1" aria-hidden="true" focusable="false" role="img" data-v-555a030c="">
<title data-v-555a030c="">Nuxt.js logo</title>
<g transform="translate(0 49)" fill="none" fill-rule="evenodd" data-v-555a030c="">
<path fill="#00C58E" d="M123 292l-1-1c-2-4-2-8-2-12H25L167 27l59 107 19-14-59-107c-1-2-8-13-20-13-5 0-13 2-19 13L4 268c-1 2-7 14-1 24 2 5 8 10 21 10h120c-13 0-19-5-21-10z" data-v-555a030c=""></path>
<path fill="#108775" d="M395 269L280 62c-2-2-8-13-20-13-5 0-12 2-19 13l-15 24v48l34-59 114 204h-43a20 20 0 0 1-2 12v1c-6 10-19 10-21 10h68c2 0 15 0 21-10 2-5 4-13-2-23z" data-v-555a030c=""></path>
<path fill="#2F495E" fill-rule="nonzero" d="M332 292v-1l1-2c1-3 2-7 1-10l-4-11-90-158-13-24h-1l-13 24-91 158-3 11a21 21 0 0 0 2 13c3 5 9 10 21 10h168c3 0 16 0 22-10zM226 134l83 145H144l82-145z" data-v-555a030c=""></path>
</g>
</svg>
<b aria-hidden="true" class="text-muted h2" data-v-555a030c="">+</b>
<svg xmlns="http://www.w3.org/2000/svg" height="3em" width="3em" viewBox="0 0 2041 2160" clip-rule="evenodd" fill-rule="evenodd" data-v-555a030c="">
<title data-v-555a030c="">BootstrapVue logo</title>
<path d="m1397 271-370 642-371-642h-592l963 1667 962-1667z" fill="#34495e" data-v-555a030c=""></path>
<path d="m44 0h1952l-979 1696z" fill="#563d7c" fill-rule="nonzero" data-v-555a030c=""></path>
<path d="m1633 392-612 1061-613-1061h-408l1021 1768 1020-1768z" fill="#41b883" data-v-555a030c=""></path>
<path d="m767 196h339c62 0 112 14 150 43 38 28 56 71 56 129 0 36-8 66-25 91s-42 44-74 58v2c43 9 75 29 98 61 22 31 33 71 33 118 0 28-5 53-15 77s-25 44-46 61c-21 18-47 31-80 41-32 11-71 16-116 16h-320zm122 292h199c29 0 54-9 73-25 20-17 29-41 29-72 0-35-8-60-26-75-17-14-43-21-76-21h-199zm0 305h216c37 0 66-10 86-29s31-46 31-81-10-61-31-80-49-28-86-28h-216z" fill="#fff" data-v-555a030c=""></path>
</svg>
</div>
<div class="row mb-3" data-v-555a030c="">
<div class="col-lg-10 offset-lg-1" data-v-555a030c="">
<p class="text-lg-center mb-0" data-v-555a030c=""> 使用我们随附的 Nuxt.js 模块轻松将 BootstrapVue 集成到您的 Nuxt.js 项目中。您可以选择仅指定所需的组件，指令 和/或 插件。 </p>
</div>
</div>
<a href="./docs/" target="_self" class="btn mb-3 btn-outline-secondary btn-sm" data-v-555a030c=""> BootstrapVue Nuxt.js 模块 </a>
<p class="mb-0 text-center" data-v-555a030c=""> BootstrapVue 的文档是使用 <span class="bd-text-purple-bright" data-v-555a030c="">BootstrapVue</span> 创建的，并使用 <a href="https://nuxtjs.org" target="_blank" data-v-555a030c="">Nuxt.js</a> 生成 </p>
</article>
</section>
<section class="bv-section bv-white" data-v-555a030c="">
<article class="text-center container" data-v-555a030c="">
<h2 class="h4 text-center bd-text-purple-bright mb-3" data-v-555a030c="">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 41" width="2.5em" height="2.5em" fill="currentColor" fill-rule="evenodd" aria-hidden="true" focusable="false" role="img" class="d-block mx-auto mb-2" data-v-555a030c="">
<title data-v-555a030c="">Open Collective logo</title>
<path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z" data-v-555a030c=""></path>
<path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z" data-v-555a030c=""></path>
</svg>
在 Open Collective 上支持 BootstrapVue </h2>
<a rel="noopener" target="_blank" href="https://opencollective.com/bootstrap-vue#sponsor" class="btn mb-2 btn-outline-secondary btn-sm" data-v-555a030c=""> 成为赞助商 </a> <a rel="noopener" target="_blank" href="https://opencollective.com/bootstrap-vue#backer" class="btn mb-2 btn-outline-secondary btn-sm" data-v-555a030c=""> 成为支持者 </a> <a rel="noopener" target="_blank" href="https://opencollective.com/bootstrap-vue#donate" class="btn mb-2 btn-outline-secondary btn-sm" data-v-555a030c=""> 捐赠 </a>
<div data-v-4c1e0c56="" data-v-555a030c="">
<h3 data-v-4c1e0c56="" class="h4 mx-auto mt-4 text-muted">捐助者</h3><img src="style/images/backers.svg" alt=""/>
</article>
</section>
<div aria-hidden="true" class="bv-section bv-gray bv-p-reset" data-v-555a030c=""></div>
</main>  
  
 
 
<footer class="bd-footer text-muted" data-v-197173bd="">
<div class="container" data-v-197173bd="">
<div class="row justify-content-center" data-v-197173bd="">
<div class="text-center text-sm-right col-sm order-sm-3 col-12" data-v-197173bd=""><img src="" alt="BootstrapVue logo" width="100" class="mb-4 mt-0 mt-sm-4 img-fluid" data-v-197173bd=""></div>
<div class="text-left col-md-4 col-auto" data-v-197173bd="">
<h5 class="bd-text-purple-bright mb-1" data-v-197173bd="">文献资料</h5>
<ul class="list-unstyled ml-3" data-v-197173bd="">
<li data-v-197173bd=""><a href="https://bootstrap-vue.org/" target="_blank" class="nuxt-link-exact-active nuxt-link-active" data-v-197173bd="">BootstrapVue英文官方主页</a></li>
<li data-v-197173bd=""><a href="http://code.z01.com/bootstrap-vue" target="_blank" class="nuxt-link-exact-active nuxt-link-active" data-v-197173bd="">BootstrapVue中文站</a></li>
<li data-v-197173bd=""><a href="./docs" target="_self" data-v-197173bd="" class="">入门</a></li>
<li data-v-197173bd=""><a href="./docs/components" target="_self" data-v-197173bd="" class="">组件</a></li>
<li data-v-197173bd=""><a href="./docs/directives" target="_self" data-v-197173bd="" class="">指令</a></li>
<li data-v-197173bd=""><a href="./docs/icons.html" target="_self" data-v-197173bd="" class="">Icons 图标</a></li>
<li data-v-197173bd=""><a href="./docs/reference" target="_self" data-v-197173bd="" class="">参考</a></li>
<li data-v-197173bd=""><a href="./docs/reference" target="_self" data-v-197173bd="" class="">杂项</a></li>
<li data-v-197173bd=""><a href="https://bootstrap-vue.org/play" target="_self" data-v-197173bd="" class="">在线体验</a></li>
	</ul>
	</div>
	<div class="text-left col-auto" data-v-197173bd="">
	<h5 class="bd-text-purple-bright mb-1" data-v-197173bd="">社区</h5>
	<ul class="list-unstyled ml-3" data-v-197173bd="">
	<li data-v-197173bd=""><a href="https://github.com/bootstrap-vue/bootstrap-vue" target="_blank" data-v-197173bd="">GitHub-官方英文原版库</a></li>
	<li data-v-197173bd=""><a href="https://github.com/zoomla/bootstrapVue-cn" target="_blank" data-v-197173bd="">GitHub-中文项目库</a></li>
	<li data-v-197173bd=""><a href="https://gitee.com/zoomla/Bootstrap-Vue" target="_blank" data-v-197173bd="">Gitee码云中文</a></li>
	<li data-v-197173bd=""><a href="https://discord.gg/j2Mtcny" target="_blank" data-v-197173bd="">异议评论</a></li>
<li data-v-197173bd=""><a href="https://twitter.com/BootstrapVue" target="_blank" data-v-197173bd="">Twitter</a></li>
<li data-v-197173bd=""><a href="https://opencollective.com/bootstrap-vue/" target="_blank" data-v-197173bd="">开放集体</a></li>
</ul>
</div>
</div>
<hr data-v-197173bd="">
<p class="mb-2" data-v-197173bd="">以世界上所有的爱来设计和建造。由 <a href="https://github.com/orgs/bootstrap-vue/people" target="_blank" data-v-197173bd="">核心团队</a> 在 <a href="https://github.com/bootstrap-vue/bootstrap-vue/graphs/contributors" target="_blank" data-v-197173bd="">我们的贡献者</a> 的帮助下进行维护。</p>
<p data-v-197173bd=""> 目前是 v2.12.0。<a href="https://github.com/bootstrap-vue/bootstrap-vue/blob/master/LICENSE" target="_blank" data-v-197173bd="">MIT</a> 代码授权。使用 <a href="https://nuxtjs.org/" target="_blank" data-v-197173bd="">Nuxt.js</a> 生成并自豪地托管在 <a href="https://www.netlify.com" target="_blank" data-v-197173bd="">Netlify</a> 上的文档。</p>
			<p class="pt-2 pb-4">本文档由 <a href="http://www.z01.com" target="_blank">Zoomla!逐浪CMS团队</a> 奉献，<a href="http://www.73ic.com" target="_blank">73ic.com 去上云</a> 提供宽带与云计算支持，图标渲染基于 <a href="https://f.ziti163.com/">逐浪字库</a> 与 <a href="https://ico.z01.com/">zico图标库</a>。</p>
</div>
</footer>

<script src="../js/jquery-3.2.1.slim.min.js"></script> 
<script src="../v4/assets/js/vendor/jquery-slim.min.js"></script> 
<script src="../v4/dist/js/popper.min.js"></script> 
<script src="../v4/dist/js/bootstrap.min.js"></script> 
<script src="../v4/assets/js/docs.min.js"></script> 
<script src="../v4/assets/js/ie-emulation-modes-warning.js"></script> 
<script>
Holder.addTheme('gray', {
bg: '#777',
fg: 'rgba(255,255,255,.75)',
font: 'Helvetica',
fontweight: 'normal'
});
</script>
</body>
</html>